<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单组合</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
</head>
<style>
.layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">新增通告</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form id="up-form" class="layui-form" action="" lay-filter="component-form-group" enctype="multipart/form-data">
        
          <div class="layui-col-md6">
	          <div class="layui-form-item">
	            <label class="layui-form-label">通告标题</label>
	            <div class="layui-input-inline">
	              <input type="text" name="notifyName" lay-verify="required" placeholder="请输入通告标题" autocomplete="off" class="layui-input">
	            </div>
	          </div>
          </div>
          <div class="layui-col-md12">
	          <div class="layui-form-item">
	            <label class="layui-form-label">备注内容</label>
	            <div class="layui-input-block">
	              <textarea name="note" placeholder="请输入备注内容" autocomplete="off" class="layui-textarea"></textarea>
	            </div>
	          </div>
          </div>
          <div class="layui-form-item">
			    <label class="layui-form-label">上传附件</label>
			    <div class="layui-input-block">
				  	<div class="layui-upload">
					    <button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
					    <div class="layui-word-aux" id="upload-sign"></div>
					    <div class="layui-upload-list">
					      <img class="layui-upload-img" id="test-upload-normal-img">
					      <p id="test-upload-demoText"></p>
					    </div>
				  	</div>
			   	</div>
		  </div>
          <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button id="layui-sub" class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
	
<script src="${ctxPath}/layuiadmin/layui/layui.js"></script> 
<script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>

<script>
layui.config({
    base: '${ctxPath}/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'upload','form'], function(){
    var $ = layui.jquery
    ,upload = layui.upload
    ,form = layui.form;
  
    form.render(null, 'component-form-group');
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test-upload-normal'
      ,url: '${ctxPath}/Notify/saveNotify'
   	  ,auto: false //选择文件后不自动上传
      ,before: function(obj){
        obj.preview(function(index, file, result){
          $('#test-upload-normal-img').attr('src', result);
        });
      }
      ,choose: function(obj){
        var files = obj.pushFile();
        obj.preview(function(index, file, result){
        	$('#test-upload-normal-img').attr('src', result);
        	$('#upload-sign').html(file.name+"<br/>"+file.size+"B");
        });
      }
      ,done: function(res){
    	  //完成后
      }
      ,error: function(){
    	  //失败后
      }
    });
    
    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      var formSatellite = document.getElementById("up-form");//获取所要提交form的id
      var fs1 = new FormData(formSatellite);  //用所要提交form做参数建立一个formdata对象
	  $.ajax(
		{
			url:'${ctxPath}/Notify/saveNotify',
			type:'post',
            data:fs1,
            dataType:"json",
			contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            success:function( res ){
                if(res.result == 'success'){
                	layer.msg( '上传成功' ,
							{icon:1,time:2000,offset:'20px'});
                	var demoText = $('#test-upload-demoText');
                	demoText.html('');
                	setTimeout( reloadPage, 500 );
                }else{
                	layer.msg("上传失败，原因:"+ res.cause ,
							{icon:2,time:2000,offset:'20px'});
                	var demoText = $('#test-upload-demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重新上传</a>');
                    demoText.find('.demo-reload').on('click', function(){
                      //uploadInst.upload();
                      $("#layui-sub").click();
                    });
                }
			}
		}			
	); 
      return false;
    });
    
    
  });
  
  $('button[type=reset]').on('click',function(){
	  $('#test-upload-demoText').html('');
	  $('#test-upload-normal-img').removeAttr('src');
  	  $('#upload-sign').html('');
  });
  
function reloadPage(){
	window.location = '${ctxPath}/Notify/viewAddNotify';
}
</script>

</body>
</html>
        